<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <th:block th:include="include :: header('查看资料文件')" />
    <style>
        /*基本信息表单布局*/
        .m
        {
            margin-top: 50px;
        }
        h1 {
            text-align:center;
        }
        .progress {
            width:600px;
            height:10px;
            border:1px solid #ccc;
            border-radius:10px;
            margin:10px 0px;
            overflow:hidden;
        }
        /* 初始状态设置进度条宽度为0px */
        .progress > div {
            width:0px;
            height:100%;
            background-color:yellowgreen;
            transition:all .3s ease;
        }



    </style>
</head>
<body class="white-bg">
<div class="container-div">
    <!--标题-->
    <div class="btn-group-sm" id="toolbar" role="group">
        <h1>资料信息</h1>
    </div>
    <!-- 文件资料信息-->
    <form class="form-horizontal m" id="form-filelogs-detail" th:object="${vtspFilelogs}">
        <input name="fileLogid" th:field="*{fileLogid}" type="hidden">
        <div class="col-md-8">
            <div class="row">
                <div class="form-group col-md-6">
                    <p>活动编号：<span th:text="*{activityId}">activityId</span></p>
                </div>
                <div class="form-group col-md-6">
                    <p>资料类型：<span th:text="*{extType}">extType</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <p>资料编号：<span th:text="*{activityId}">activityId</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <p>活动名称：<span th:text="*{activityName}">activityName</span></p>
                </div>
                <div class="form-group col-md-6">
                    <p>文件数量：<span th:text="*{fileNum}">fileNum</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <p>文件大小：<span th:text="*{fileSize}">fileSize</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <p>创建人：<span th:text="*{createBy}">createBy</span></p>
                </div>
                <div class="form-group col-md-6">
                    <p>创建时间：<span th:text="${#dates.format(vtspFilelogs.createTime, 'yyyy-MM-dd')}">createTime</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <p>更新者：<span th:text="*{updateBy}">updateBy</span></p>
                </div>
                <div class="form-group col-md-6">
                    <p>更新时间：<span th:text="${#dates.format(vtspFilelogs.updateTime, 'yyyy-MM-dd')}">updateTime</span></p>
                </div>
            </div>

        </div>

    </form>
    <!-- 上传文件模块 -->
    <table>
        <tr>
            <td>附件</td>
            <td>
                <input class="easyui-filebox" type="file" name="file1" id="file1"><a href="javascript:imageUpload()" class="easyui-linkbutton">上传</a>
            </td>
            <td>
                <input type="hidden"  id="ssFile" name="ssFile"> <!--用于文件名回显-->
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>附件</td>
            <td><a href="" id="ssUrl" class="easyui-linkbutton">下载</a>
            </td>
        </tr>
    </table>

</div>

<script type="text/javascript">
    function imageUpload(){
        var file1 = document.getElementById("file1");
        var ssFile = document.getElementById("ssFile");
        ssFile.value = file1.value.substring(12);    //取出文件名，并赋值回显到文本框，用于向后台传文件名
        $.ajaxFileUpload({
            url : '${filelogs}/detail/up.json', //用于文件上传的服务器端请求地址
            fileElementId : 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />
            type : 'post',
            dataType : 'text', //返回值类型 一般设置为json
            success : function(data, status) //服务器成功响应处理函数
            {
                alert("文件上传成功");

            },
            error : function(data, status, e)//服务器响应失败处理函数
            {
                alert("文件上传失败");

            }
        });
    }
    $("#ssUrl").attr('href',"${pageContext.request.contextPath}/bug/download?filename="+fileName) //将后台的路径和文件名赋值给a标签 fileName需要自己从数据库中查出
</script>

</body>
</html>

